<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="shortcut icon" href="#"/>
    <!-- Vue 的文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <!-- jQuery 的文件 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            background: url("../1.webp") no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-box {
            width: 100%;
            max-width: 400px; /* 限制最大宽度 */
            padding: 50px 40px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }

        .login-box:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-button {
            width: auto;
            margin-right: 10px; /* 为按钮添加间距 */
        }

        .button-row {
            display: flex;
            justify-content: space-between;
            position: relative;
            left: -65px;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="appVue" class="login-box">
    <div class="container-fluid">
        <!-- 使用 Element UI 的表单组件 -->
        <el-form :model="user" :rules="myRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 用户名输入框 -->
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username"></el-input>
            </el-form-item>

            <!-- 密码输入框 -->
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password"></el-input>
            </el-form-item>

            <!--验证码输入框-->
            <el-form-item label="验证码" prop="code">
                <el-input v-model="user.code"></el-input>
                <img id="code" style="width: 60%; cursor: pointer;float: right;" @click="flushCode"/>
            </el-form-item>

            <!-- 提交和重置按钮 -->
            <el-form-item class="button-row">
                <el-row type="flex" class="row-bg">
                    <el-col :span="10">
                        <el-button type="primary" @click="submitForm('ruleForm')">立即登入</el-button>
                    </el-col>
                    <el-col :span="7">
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-col>
                    <el-col :span="7">
                        <el-button @click="register">注册</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</div>
<script>
    let appVue = new Vue({
        el: '#appVue',
        data: {
            user: {
                username: 'jack',
                password: '123',
                code: ''
            },
            myRules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            },
            codeId: ''
        },
        methods: {
            // 刷新得到验证码
            flushCode() {
                $.ajax({
                    url: "/getCode",
                    type: "get",
                    success: function (json) {
                        console.log("---------- 得到后端的验证码对象 ------------")
                        console.log(json);
                        console.log("base64位图片：" + json.data.code);
                        $("#code").prop("src", json.data.code)
                        // 把codeId设置到表单中。
                        appVue.codeId = json.data.codeId;
                    }
                })
            },

            // 登录方法
            login() {
                // 首先验证验证码
                $.ajax({
                    type: 'get',
                    url: '/verifyCode',
                    data: {
                        code: this.user.code,
                        codeId: this.codeId
                    },
                    dataType: 'json',
                    success: function (response) {
                        if (response.code == 200 && response.msg == "验证码正确") {
                            // 验证码正确，继续登录流程
                            $.ajax({
                                type: 'post',
                                url: '/user/login',
                                dataType: 'json',
                                data: JSON.stringify(appVue.user),
                                contentType: 'application/json',
                                success: function (response) {
                                    console.log(response);
                                    if (response.code == 200) {
                                        sessionStorage.setItem("username", appVue.user.username);
                                        sessionStorage.setItem("avatar", response.data.avatar);
                                        window.location.href = "main.html";
                                        // // 刷新验证码
                                        appVue.flushCode();
                                    } else {
                                        alert("登录失败：" + response.msg);
                                    }
                                },
                            });
                        } else {
                            alert("验证码错误：" + response.msg);
                            // 刷新验证码
                            appVue.flushCode();
                            //验证码文本框为空
                            appVue.user.code = "";

                        }
                    },
                });
            },
            // 提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.login();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
                // 刷新验证码
                appVue.flushCode();
            },

            // 注册方法
            register() {
                // 注册方法
                alert("注册功能尚未实现");
            },

        },
        created() {
            // 一开始，就得到验证码。
            this.flushCode();
        }
    });
</script>
</body>
</html>